<template>
  <div class="custom-wrapper">
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}</div>
    </div>

    <div class="app-container margin-content padding-content">
      <el-form
        label-position="left"
        :model="dataForm"
        ref="dataForm"
        label-width="130px">

        <el-row :gutter="48">
          <el-col :sm="24" :md="8">
            <el-form-item label="报关单类型" prop="aaa">
              <el-input placeholder="报关单类型" v-model="dataForm.aaa" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="企业类别" prop="aaa">
              <el-input placeholder="企业类别" v-model="dataForm.aaa" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="进出口标志" prop="aaa">
              <el-input placeholder="进出口标志" v-model="dataForm.aaa" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="提运单号" prop="aaa">
              <el-input placeholder="提运单号" v-model="dataForm.aaa" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="统一编号" prop="aaa">
              <el-input placeholder="统一编号" v-model="dataForm.aaa" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="境内收发货人" prop="aaa">
              <el-input placeholder="境内收发货人" v-model="dataForm.aaa" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="申报地海关" prop="aaa">
              <el-input placeholder="申报地海关" v-model="dataForm.aaa" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="是否结关" prop="aaa">
              <el-input placeholder="是否结关" v-model="dataForm.aaa" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="8">
            <el-form-item label="最近操作时间" prop="aaa">
              <el-input placeholder="最近操作时间" v-model="dataForm.aaa" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-show="this.toggleFlag">
          <el-row :gutter="48">
            <el-col :sm="24" :md="8">
              <el-form-item label="操作类型" prop="aaa">
                <el-input placeholder="操作类型" v-model="dataForm.aaa" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="8">
              <el-form-item label="贸易国别" prop="aaa">
                <el-input placeholder="贸易国别" v-model="dataForm.aaa" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="8">
              <el-form-item label="检验检疫受理机关" prop="aaa">
                <el-input placeholder="检验检疫受理机关" v-model="dataForm.aaa" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="8">
              <el-form-item label="统一编号" prop="aaa">
                <el-input placeholder="统一编号" v-model="dataForm.aaa" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="8">
              <el-form-item label="报关状态" prop="aaa">
                <el-input placeholder="报关状态" v-model="dataForm.aaa" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="8">
              <el-form-item label="集装箱号" prop="aaa">
                <el-input placeholder="集装箱号" v-model="dataForm.aaa" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="8">
              <el-form-item label="进出口日期" prop="aaa">
                <el-input placeholder="进出口日期" v-model="dataForm.aaa" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="8">
              <el-form-item label="境外收发货人" prop="aaa">
                <el-input placeholder="境外收发货人" v-model="dataForm.aaa" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="8">
              <el-form-item label="运输方式" prop="aaa">
                <el-input placeholder="运输方式" v-model="dataForm.aaa" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :sm="24" :md="8">
              <el-form-item label="航次号" prop="aaa">
                <el-input placeholder="航次号" v-model="dataForm.aaa" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div style="text-align: right">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="text" @click="toggleSearch">
            {{toggleText}}
            <span :class="toggleIconClass"></span>
          </el-button>
        </div>
      </el-form>
    </div>

    <div class="app-container margin-content padding-content">
      <div class="my-title">检索结果 <span>2019-2-18~2019-2-18</span></div>
      <el-table
        :key="tableKey"
        :data="tableData"
        v-loading="loading"
        :highlight-current-row="true"
        element-loading-text="正在加载..."
        style="width: 100%;">

        <el-table-column label="统一编号" prop="containerId"/>
        <el-table-column label="海关编号" prop="containerId"/>
        <el-table-column label="境内收发货人" prop="containerId"/>
        <el-table-column label="境内收发货人18位信用代码" prop="containerId"/>
        <el-table-column label="提运单号" prop="containerId"/>
        <el-table-column label="进出口日期" prop="containerId"/>
        <el-table-column label="监管方式" prop="containerId"/>
        <el-table-column label="合同协议号" prop="containerId"/>
        <el-table-column label="商品项数" prop="containerId"/>
        <el-table-column label="运输工具" prop="containerId"/>
        <el-table-column label="报关状态" prop="containerId"/>
        <el-table-column label="申报单位名称" prop="containerId"/>
        <el-table-column label="进出口标志" prop="containerId"/>
        <el-table-column label="申报地海关" prop="containerId"/>
        <el-table-column label="入境/离境口岸" prop="containerId"/>
        <el-table-column label="贸易国" prop="containerId"/>
      </el-table>

      <div class="pagination-container align-right" v-show="tableData.length > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="dataForm.pageNum"
          :page-sizes="pageSizes"
          :page-size="dataForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'dataRetrievalDeclare',
    data() {
      return {
        tableKey: 0,
        tableData: [],
        loading: false,
        dataForm: {
          aaa: '',
          pageNum: 1,
          pageSize: 20
        },
        pageSizes: [10, 20, 30, 50],
        total: 0,
        toggleFlag: false,
      }
    },
    computed: {
      toggleText() {
        return this.toggleFlag ? '收起' : '展开'
      },
      toggleIconClass() {
        return this.toggleFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
      },
    },
    created() {
    },
    methods: {
      resetForm() {
        this.$refs['dataForm'].resetFields()
      },
      handleSearch() {
        this.dataForm.pageNum = 1
      },
      toggleSearch() {
        this.toggleFlag = !this.toggleFlag
      },
      handleSizeChange(val) {
        this.dataForm.pageSize = val
      },
      handleCurrentChange(val) {
        this.dataForm.pageNum = val
      },
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">
.my-title {
  padding: 8px;

  span {
    color: #999;
    padding-left: 8px;
  }
}
</style>
